<template>
    <div style="width: 1300px">
        <el-card class="card-container">
            <template #header>
                <div class="header">
                    <h3>试卷列表</h3>
                    <el-button type="primary" plain @click="showDialog">添加试卷</el-button>
                </div>
            </template>
            <el-table :data="papers" border>
                <el-table-column prop="paperName" label="试卷名称"></el-table-column>
                <el-table-column prop="term" label="考试学期"></el-table-column>
                <el-table-column prop="class" label="考试班级"></el-table-column>
                <el-table-column prop="questionCount" label="题目数量"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="text" @click="edit(row)">查看/编辑</el-button>
                        <el-button type="text" @click="startExam(row)">组卷</el-button>
                        <el-button type="text" @click="makePaperRandomly(row)">自动组卷</el-button>
                        <el-button type="text" @click="remove(row)">删除</el-button>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty></el-empty>
                </template>
            </el-table>
        </el-card>
        <el-dialog v-model="dialogVisible" title="添加试卷" width="50%">
            <el-form :model="form" ref="formRef" label-width="100px">
                <el-form-item label="试卷名称" prop="paperName">
                    <el-input v-model="form.paperName"></el-input>
                </el-form-item>
                <el-form-item label="学科" prop="subjectId">
                    <el-input v-model="form.subjectId"></el-input>
                </el-form-item>
                <el-form-item label="考试学期" prop="term">
                    <el-input v-model="form.term"></el-input>
                </el-form-item>
                <el-form-item label="考试学年" prop="academyYaer">
                    <el-input v-model="form.academyYaer"></el-input>
                </el-form-item>
                <el-form-item label="考试班级" prop="class">
                    <el-input v-model="form.class"></el-input>
                </el-form-item>
                <el-form-item label="学院" prop="academy">
                    <el-input v-model="form.academy"></el-input>
                </el-form-item>
                <el-form-item label="考试形式" prop="format">
                    <el-input v-model="form.format"></el-input>
                </el-form-item>
                <el-form-item label="考试时间" prop="suggestTime">
                    <el-input v-model="form.suggestTime"></el-input>
                </el-form-item>
                <el-form-item label="AB卷" prop="typePaper">
                    <el-input v-model="form.typePaper"></el-input>
                </el-form-item>
                <el-form-item label="题目数量" prop="questionCount">
                    <el-input v-model="form.questionCount"></el-input>
                </el-form-item>
                <el-form-item label="分数" prop="score">
                    <el-input v-model="form.score"></el-input>
                </el-form-item>
                <el-form-item label="临时分数" prop="temScore">
                    <el-input v-model="form.temScore"></el-input>
                </el-form-item>
            </el-form>

            <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">{{ selectedPaper ? '保存' : '提交' }}</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { addPaper, GetpaperList, editPaper, delPaper, GetDetailPaper, PaperGetItemDetail, makePaperRandomly_api } from "@/api/paper";
import paperManage from '@/views/paperManage/index.vue'
const formRef = ref();
let papers = ref([
    {
        id: 1,
        paperName: "数学考试",
        subjectId: "001",
        term: "第一学期",
        academyYaer: "2023-2024",
        class: "1班",
        academy: "数学学院",
        format: "笔试",
        suggestTime: "120分钟",
        typePaper: "AB卷",
        questionCount: 50,
        score: 100,
        temScore: 0,
    },
]);
const dialogVisible = ref(false);
const form = ref({
    paperName: "",
    subjectId: "",
    term: "",
    academyYaer: "",
    class: "",
    academy: "",
    format: "",
    suggestTime: "",
    typePaper: "",
    questionCount: "",
    score: "",
    temScore: "",
});
// const paperDetailItems = ref([])
// const backToList=ref(fasle)
const makePaperRandomly = async (row) => {
    const state = await makePaperRandomly_api(row.id)
}
// 开始组卷后，发送试卷ID，获取试卷中的所有题目，赋值给paperDetailItems.value
const paperId = ref()
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const subId = parseInt(route.params.subId)
const router = useRouter();

const startExam = async (row) => {
    router.push({
        name: "paperManage",
        params: {
            subId,
            paperId: row.id,
        }
    });
}
onMounted(() => {
    refreshData()
});
const refreshData = () => {
    GetpaperList(subId).then((data) => {
        papers.value = data.data.data.map((paper) => {
            const {
                paper_name: paperName,
                subject_id: subjectId,
                academy_yaer: academyYear,
                question_count: questionCount,
                ...rest
            } = paper;
            return {
                ...rest,
                paperName,
                subjectId,
                academyYear,
                questionCount
                // index: index + 1,
            };
        });
    });
}
let selectedPaper;
const showDialog = () => {
    dialogVisible.value = true;
    form.value = {
        paperName: "",
        subjectId: "",
        term: "",
        academyYaer: "",
        class: "",
        academy: "",
        format: "",
        suggestTime: "",
        typePaper: "",
        questionCount: "",
        score: "",
        temScore: "",
    };
};

const submitForm = async () => {
    await formRef.value.validate();
    papers.value = papers.value.map((paper) => {
        // console.log("paper", paper);
        // 左边的重命名变成右边的
        const {
            paperName: paper_name,
            subjectId: subject_id,
            academyYear: academy_yaer,
            questionCount: question_count,
            ...rest
        } = paper;
        return {
            ...rest,
            paper_name,
            subject_id,
            academy_yaer,
            question_count
            // index: index + 1,
        };
    });
    if (selectedPaper) {
        Object.assign(selectedPaper, form.value);
        // console.log("form.value", form.value);
        await editPaper(form.value);
        selectedPaper = null;
        ElMessage.success("试卷编辑成功");
    } else {
        await addPaper(form.value);
        papers.value.push({ ...form.value });

        ElMessage.success("试卷添加成功");
    }
    refreshData()
    dialogVisible.value = false;
};



const cancel = () => {
    dialogVisible.value = false;
};

const edit = async (row) => {
    const res = await GetDetailPaper(row.id);
    const { paper_name, subject_id, suggest_time, type_paper
        , question_count, academy_yaer, ...rest } = res.data.data;
    dialogVisible.value = true;
    form.value = {
        ...rest,
        academyYaer: academy_yaer,
        paperName: paper_name,
        subjectId: subject_id,
        suggestTime: suggest_time,
        typePaper: type_paper,
        questionCount: question_count
    };
    selectedPaper = row;
};
const remove = (row) => {
    ElMessageBox.confirm("确定删除该试卷吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        await delPaper(row.id);
        const index = papers.value.indexOf(row);
        papers.value.splice(index, 1);
        ElMessage.success("试卷删除成功");
    });
};
</script>

<style lang="scss" scoped>
.card-container {
    margin: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dialog-footer {
    text-align: right;
    margin-top: 20px;
}
</style>
